/* pages/cloudStorage/index/index.wxss */
.cloudPage {
    background: #f8f9fa;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .scrollView {
        flex-grow: 1;
        height: 0;
    }

    .cloudMain {
        padding: 0 24rpx 100rpx 24rpx;
        display: flex;
        flex-direction: column;
        gap: 32rpx;
    }


}

.status {
    background: linear-gradient(-90deg, rgba(26, 124, 216, 1), rgba(32, 147, 239, 1));
    color: #fff;
    font-size: 24rpx;
    padding: 44rpx 20rpx;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 48rpx;
        padding-left: 20rpx;
    }

    .statusHeader {
        display: flex;
        justify-content: space-between;

        .count {
            font-size: 40rpx;
            font-weight: 600;
        }

        .restExpiration {
            text-align: right;
            display: flex;
            flex-direction: column;
            gap: 10rpx;

            .expiration {
                font-size: 20rpx;
            }
        }
    }

    .statusBar {
        padding: 32rpx 0;

        .track {
            background: rgba(255, 255, 255, .35);
            height: 32rpx;
            display: flex;
            border-radius: 12rpx;
            overflow: hidden;

            .bar {
                background: #fff;
                width: 40%;
            }
        }

        .legend {
            display: flex;
            padding-top: 20rpx;
            gap: 20rpx;

            .item {
                display: flex;
                padding-left: 18rpx;

                .dot {
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 50%;
                    background: #fff;
                    position: relative;
                    transform: translateY(12rpx) translateX(-8rpx);
                }

                &:last-child {
                    .dot {
                        opacity: .35;
                    }
                }
            }
        }
    }

    .statusInfo {
        padding: 24rpx 0 0 0;
        border-top: #4999E2 1px solid;
        vertical-align: middle;
        line-height: 44rpx;

        .info {

            display: flex;
            gap: 10rpx;
        }

        .iconfont {
            color: #f1c024;
            font-size: 40rpx;
            line-height: 44rpx;
        }
    }
   
}
.devices{
    background: #fff;
    font-size: 24rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    .boxHeader{
        display: flex;
        justify-content: space-between;
        .link{
            display: flex;
            gap: 12rpx;
            color: #058aff;
            .iconfont{
                position: relative;
                transform: rotate(45deg);
            }
        }
    }
}
.deviceList{
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding: 24rpx 0;
    .item{
        background: #f8f9fa;
        display: flex;
        padding: 24rpx 0;
        .used{
            font-size: 20rpx;
            color: #adb5bd;
        }
        .info{
            flex-grow: 1;
        }
        .icon{
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #058aff;
            padding: 0 24rpx;
            .iconfont{
                font-size: 38rpx;
            }
            .gray{
                color: #adb5bd;
            }
        }
    }
}